<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<template>
  <div>
    <h3 class="line-h-32">{{selectedTitle}}</h3>
    <mavon-editor ref="md" @imgAdd="$imgAdd" v-model="content"></mavon-editor>
    <el-button @click="saveFile">保存</el-button>
    <!--<form id="frmUploader"   enctype="multipart/form-data" action="api/Upload/" method="post" @submit="saveReport">-->
    <!--<input type="file" name="imgUploader" multiple id="img"/>-->
    <!--<input type="submit" name="submit" id="btnSubmit" value="Upload" @click="$imgAdd"/>-->
    <!--</form>-->
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {mavonEditor} from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  export default {
    name: 'edit-content',
    data () {
      return {}
    },
    computed: {
      content: {
        // getter
        get: function () {
          return this.$store.state.selectedNodeContent;
        },
        // setter
        set: function (newValue) {
          this.$store.state.selectedNodeContent = newValue;
        }
      },
      selectedNode: {
        // getter
        get: function () {
          return this.$store.state.selectedNode;
        },
        set: function (newValue) {
          this.$store.state.selectedNode = newValue;
        }
      },
      selectedTitle: {
        // getter
        get: function () {
          return this.$store.state.selectedTitle;
        },
        set: function (newValue) {
          this.$store.state.selectedTitle = newValue;
        }
      }
    },
    components: {
      mavonEditor
    },
    methods: {
      saveReport () {
        return false;
      },
      $imgAdd (pos, $file) {
        // 第一步.将图片上传到服务器.
        const _this = this;
        let formData = new FormData();
        formData.append("imgUploader", $file);//设置key为avartar,value为上述的File对象
        console.log($file.name)
        this.services.img.uploadImg(formData).then((data) => {
          _this.$refs.md.$img2Url(pos, '/img/' + $file.name);
        })
      },
      saveFile () {
        this.$store.state.selectedNode.mtime = new Date().getTime();
        this.$store.state.selectedNode.content = this.content;
        this.services.file.saveFile(this.$store.state.selectedNode).then((data) => {
          console.log(data);
        });
      }
    },
    watch: {},
    created () {
    },
    mounted () {

    }
  }
</script>
